<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select
                clearable
                @clear="clearfn('hospitalId')"
                filterable
                v-model="params.hospitalId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="充值时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select
                clearable
                @clear="clearfn('auditStatus')"
                filterable
                v-model="params.auditStatus"
                placeholder="请选择"
              >
                <el-option label="全部" :value="null"></el-option>
                <el-option label="待审核" :value="0"></el-option>
                <el-option label="审核通过" :value="1"></el-option>
                <el-option label="审核失败" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间">
              <el-date-picker
                v-model="time1"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <!-- 新加 -->
            <Exprotcomponent
              :params="params"
              url="/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/hospitalAccountRechargeexport.html"
              type="java"
              permissionJson="AdminHospitalAccountProvider.hospitalAccountRechargeexport"
            ></Exprotcomponent>
            <!-- <el-button
              style="margin-left:60px"
              type="primary"
              @click="exfun"
              v-if="$store.state.user.permissionJson.indexOf('AdminHospitalAccountProvider.hospitalAccountRechargeexport') !=-1"
            >导出</el-button>-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv">
      <!-- {{$store.state.user.permissionJson}} -->
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="name" label="医院名称" align="center" />
        <el-table-column prop="bankCard" label="充值卡号" align="center" />
        <el-table-column prop="bank" label="开户行" align="center" />
        <el-table-column prop="realName" label="户名" align="center" />
        <el-table-column prop="rechargeProof" label="凭证" align="center">
          <template slot-scope="scope">
            <!-- <el-popover placement="right" trigger="click" v-for="(item, index) in scope.row.rechargeProof" :key="index">
              <img :src="imgurl" alt srcset style="width:100%;max-width: 500px;" />
              <span
                slot="reference"
                @click="abc(item)"
                style="color: blue;
    text-decoration: underline;"
              >{{item}}</span>
            </el-popover>-->
            <el-button @click="readfn(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="amount" label="充值金额" align="center" />
        <el-table-column prop="amountAgo" label="原账户余额" align="center" />
        <el-table-column prop="amountAfter" label="充值后余额" align="center" />
        <el-table-column prop="creditAmountAgo" label="原剩余额度" align="center" />
        <el-table-column prop="creditAmountAfter" label="充值后额度" align="center" />
        <el-table-column prop="createdAt" label="充值时间" align="center" />
        <el-table-column prop="rechargeDesc" label="充值说明" align="center" />
        <!-- 新加 -->
        <el-table-column prop="isNeedInvoice" label="发票" align="center" />

        <el-table-column prop="auditStatus" label="审核状态" align="center" />
        <!-- 新加 -->
        <el-table-column prop="moneyBank" label="到账银行" align="center" />
        <el-table-column prop="auditDesc" label="审核说明" align="center" />
        <!-- 新加 -->
        <el-table-column prop="auditAt" label="审核时间" align="center" />
        <el-table-column prop="auditBy" label="审核人" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.auditStatus=='待审核' && $store.state.user.permissionJson.indexOf('AdminHospitalAccountProvider.hospitalAccountRecharge') !=-1"
              @click="checkfn(scope.row)"
              type="text"
            >审核</el-button>

            <el-button
              v-if="scope.row.isNeedInvoice=='需要'"
              type="text"
              @click="checkfn(scope.row,1)"
            >发票信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div v-if="type=='read'">
        <el-carousel :interval="5000" arrow="always" :autoplay="false">
          <el-carousel-item v-for="item in imglist" :key="item">
            <img style="height:300px;" :src="imgurl+item" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" v-if="!type">
        <el-form-item label="审核结果" prop="auditStatus">
          <el-radio v-model="form.auditStatus" :label="1">通过</el-radio>
          <el-radio v-model="form.auditStatus" :label="2">失败</el-radio>
        </el-form-item>
        <!-- 新加 -->
        <el-form-item label="到账银行" prop="bankCard" v-if="form.auditStatus==1">
          <el-select filterable v-model="form.bankCard" placeholder="请选择">
            <el-option label="公户0685" value="公户0685"></el-option>
            <el-option label="孙建新1333" value="孙建新1333"></el-option>
            <el-option label="魏明辉1295" value="魏明辉1295"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核说明">
          <el-input v-model="form.auditDesc"></el-input>
        </el-form-item>
      </el-form>
      <div v-if="type==1">
        <h3 style="margin: 0; padding: 0;text-align: center;">发票信息</h3>
        <div class style="padding-left: 50px;">
          <p>发票类型：{{info.type=='0'?'增值税发票':'普通发票' ||''}}</p>
          <p>单位名称：{{info.companyName}}</p>
          <p>纳税识别号：{{info.taxpayerIdentificationNumber}}</p>
          <p>注册地址：{{info.registerAddress}}</p>
          <p>注册电话：{{info.registerPhone}}</p>
          <p>开户账户：{{info.bankCard}}</p>
          <p>开户银行：{{info.bank}}</p>
          <p>收票人姓名：{{info.billToName}}</p>
          <p>收票人电话：{{info.billToPhone}}</p>
          <p>发票邮寄地址：{{info.billToAddressInfo}}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!type">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { hospitalDropDown } from "@/api/doctorManage";
import { exportfile } from "@/api/commjs/exprot";
import {
  hospitalAccountRechargeList,
  hospitalAccountRecharge,
  selectHospitalInvoice
} from "@/api/money";
export default {
  name: "",
  data() {
    return {
      imgurl: localStorage.getItem("imgUrlPrefix"),
      form: {},
      info: {},
      imglist: [],
      dialogVisible: false,
      time: "",
      total: 0,
      rules: {
        auditStatus: [
          { required: true, message: "请输入审核结果", trigger: "blur" }
        ],
        bankCard: [{ required: true, message: "请选择银行", trigger: "blur" }]
      },
      tableData: [{}],
      time1: [],
      officeOption: [],
      type: null, //1发票
      params: { pageNum: 1, pageSize: 10, type: 0 }
    };
  },
  watch: {
    time(val) {
      this.params.createdAtStart = val ? val[0] : "";
      this.params.createdAtEnd = val ? val[1] : "";
    },
    time1(val) {
      this.params.auditAtStart = val ? val[0] : "";
      this.params.auditAtEnd = val ? val[1] : "";
    }
  },
  created() {
    this.list();
    this.hlist();
  },
  methods: {
    //查看
    readfn(datas) {
      this.type = "read";
      console.log(datas);
      this.dialogVisible = true;
      this.imglist = datas.rechargeProof;
    },
    //导出
    exfun() {
      exportfile(
        "/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/hospitalAccountRechargeexport.html",
        this.params
      );
    },
    //清空
    clearfn(val) {
      if (!this.params[val]) this.params[val] = null;
      console.log(val, this.params[val]);
    },
    abc(url) {
      console.log(url);
      this.imgurl = localStorage.getItem("imgUrlPrefix") + url;
    },
    sure() {
      if (!this.type) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            hospitalAccountRecharge(this.form).then(res => {
              this.$message.warning(res.data.msg);
              if (res.data.code == 0) this.list();
              this.dialogVisible = false;
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.dialogVisible = false;
      }
    },
    async checkfn(datas, type) {
      this.form = {};
      this.form.id = datas.id;
      this.form.moneyBank = "公户0685";
      this.type = type;
      if (type) {
        let res = await selectHospitalInvoice({ id: datas.hospitalId - 0 });
        if (res.data.code == 0) this.info = res.data.data;
      }
      this.form.hospitalId = datas.hospitalId;
      this.dialogVisible = true;
    },
    searchFn() {
      this.params.pageNum = 1;
      this.list();
    },
    async list() {
      let res = await hospitalAccountRechargeList(this.params);
      if (res.data.code == 0) {
        if (res.data.data.list) {
          res.data.data.list.map(res => {
            res.rechargeProof = res.rechargeProof.split(",");
          });
        }

        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      }
    },
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "",
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    }
  }
};
</script>
